<template>
  <div class="content">
    <div class="box">
      <div class="title">404</div>
      <div class="text">可能我们真的走错了~</div>
      <div class="row">
        <el-button round @click="goHome">回首页</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";

let $router = useRouter()
const goHome = () => {
  $router.push('/home')
}
</script>
<style scoped lang="scss">
.content {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #FFF;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
      font-size: 100px;
    }

    .text {
      text-align: center;
      padding: 20px 0;
    }

    .row {
      padding: 20px 0;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
